<!--
 * @Author: lucklidi@126.com
 * @Date: 2024-05-15 19:41:00
 * @LastEditTime: 2024-05-16 13:02:49
 * @LastEditors: lidi10@staff.weibo.com
-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Shop Eye Log</title>
    <script src="./js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.min.css"> 
    <style>
        body {
            width: 800px;
            height: auto;
        }
        .json-display {
            /* 使用等宽字体来更好地对齐JSON键值对 */
            font-family: monospace;
            white-space: pre;
            color: green;
            background-color: white;
            padding: 10px; /* 添加内边距 */
            border-radius: 5px; /* 添加圆角 */
            border: 2px solid blue; /* 添加边框 */
            overflow-x: auto;
        }
        .custom-alert {  
            display: none; /* 初始隐藏 */  
            position: fixed; /* 假设你想要弹窗固定在屏幕上 */  
            top: 50%; /* 垂直居中 */  
            left: 50%; /* 水平居中 */  
            transform: translate(-50%, -50%); /* 使用transform属性进行居中 */  
            padding: 20px; /* 内边距 */  
            background-color: rgba(0, 0, 0, 0.5); /* 半透明的黑色背景，0.5是不透明度 */  
            color: yellowgreen; /* 文本颜色 */  
            border-radius: 5px; /* 边框圆角 */  
            z-index: 1000; /* 确保弹窗在其他元素之上 */ 
        }  
    </style>
</head>

<body>
    <div class="card">
        <div class="card-header bg-gradient-light">
            <small class="position-absolute end-0 me-3 fs-6 text-muted">
                <em style="font-size: 12px;" id="version">0.1</em></small>
        </div>
        <div class="card-body py-3">
            <div class="input-group input-group-sm mb-3">
                <button id="btn-cal" class="btn btn-outline-danger rounded-pill" type="button" 
                    style="width: 30%;">计算资源
                </button>
                <button id="btn-cop" class="btn btn-outline-success rounded-pill" type="button"
                    style="width: 30%;">复制
                </button>
                <button id="btn-del" class="btn btn-outline-warning position-absolute end-0 rounded-pill" type="button"
                    style="width: 30%;">清除
                </button>
            </div>
            <div class="input-group-m mb-1">
                <textarea style="height: 60px;" id="showtime" class="form-control border border-primary json-display" type="text"
                    placeholder="(￣▽￣)资源消耗显示在这里(￣▽￣)\" readonly>
                    (^▽^)资源消耗显示在这里(^▽^)/
                </textarea>
            </div>
        </div>
        <div class="card-footer text-muted user-select-none font-weight-light py-1" style="font-size: 10px;">
            目前Shop Eye Log 只能在 Kibana 页使用 <em class="position-absolute end-0 me-3" id="author"></em>
        </div>
    </div> 

    <div id="copySuccessAlert" class="custom-alert alert alert-success" role="alert">  
        复制成功🏅！  
    </div> 

    <script src="popup.js"></script>

</body>

</html>